<template>
  <div class="afterInvestDel-page details-page app-container1">
    <pubChunk>
      <div slot="title">
        <span class="title">{{ info.classfyName }}</span>
        <el-tooltip
          v-if="info.mark"
          popper-class="tit-tip"
          :open-delay="500"
          :content="info.mark"
          placement="right"
        >
          <i class="el-icon-document fontdoc"></i>
        </el-tooltip>
      </div>
      <div slot="headLeft" style="width: 194px">
        <!-- <el-button size="small" type="primary" @click="realContrast"><i class="iconfont icon-jia"></i>实盘对比</el-button> -->
        <el-button size="small" type="primary" @click="goContrast"
          ><i class="iconfont icon-jia"></i>去对比</el-button
        >
        <el-button size="small" @click="refreshPage">
          <i class="iconfont icon-shuaxin"></i>
          刷新
        </el-button>
      </div>
      <div class="head3">
        <div class="head-content flex">
          <div class="left">
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>单位净值：</p>
                    <p class="fs12 tip">
                      {{ info.classifyNetWorthTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    {{ info.classifyNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>今年以来收益率：</p>
                    <p class="fs12 tip">
                      截止至{{ info.classifyNetWorthTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        info.classifyNetWorthExtendBeans &&
                        info.classifyNetWorthExtendBeans[0].incomeRate
                      "
                      :class="
                        info.classifyNetWorthExtendBeans[0].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.classifyNetWorthExtendBeans[0].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div
                    class="label label-line2"
                    style="width: 138.69px; text-align: right"
                  >
                    <p>成立以来收益率：</p>
                    <p class="fs12 tip tof">
                      成立日期：{{
                        info.classifyNetWorthBean &&
                        info.classifyNetWorthBean.startDate | parseTime
                      }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        info.classifyNetWorthExtendBeans &&
                        info.classifyNetWorthExtendBeans[7].incomeRate
                      "
                      :class="
                        info.classifyNetWorthExtendBeans[7].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.classifyNetWorthExtendBeans[7].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 16px">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    累计净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{ info.classifyNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近3月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.classifyNetWorthExtendBeans &&
                        info.classifyNetWorthExtendBeans[2].incomeRate
                      "
                      :class="
                        info.classifyNetWorthExtendBeans[2].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.classifyNetWorthExtendBeans[2].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    年化收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="info.riskIndicatorsBean"
                      :class="
                        info.riskIndicatorsBean.annualizedIncomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.riskIndicatorsBean.annualizedIncomeRate | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    复权净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{ info.classifyNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近6月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.classifyNetWorthExtendBeans &&
                        info.classifyNetWorthExtendBeans[3].incomeRate
                      "
                      :class="
                        info.classifyNetWorthExtendBeans[3].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.classifyNetWorthExtendBeans[3].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    夏普比率：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">{{
                      info.riskIndicatorsBean.sharpeRate | toFixed2
                    }}</span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8"><div style="height: 22px"></div></el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近1年收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.classifyNetWorthExtendBeans &&
                        info.classifyNetWorthExtendBeans[4].incomeRate
                      "
                      :class="
                        info.classifyNetWorthExtendBeans[4].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.classifyNetWorthExtendBeans[4].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    最大回撤：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">{{
                      info.riskIndicatorsBean.maximumDrawdownRate
                    }}</span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="fromLine">
              <div class="label label-line2">
                <p>投资金额：</p>
                <p class="fs12 tip tof">单位：万元</p>
              </div>
              <div class="fromLine-content fzBig">{{ info.initMoney }}</div>
            </div>
            <div class="fromLine" style="margin-top: 15px">
              <div class="label">创建日期：</div>
              <div class="fromLine-content fw">
                {{
                  info.classifyNetWorthBean &&
                  info.classifyNetWorthBean.startDate | parseTime
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </pubChunk>

    <div class="nav flex-v-center">
      <el-form
        ref="dataFrom"
        :inline="true"
        label-width="82px"
        :model="dataFrom"
      >
        <el-form-item
          label="对比指标："
          prop="types"
          style="margin-bottom: 0px"
        >
          <indexSelectTree
            :indexType.sync="dataFrom.types"
            size="small"
            :maxNum="5"
            :clearable="false"
            @contrastOptionsObj="contrastOptionsObj"
            :width="300"
          ></indexSelectTree>
        </el-form-item>
        <el-form-item style="margin: 0 0 0 20px">
          <el-button size="small" type="primary" @click="saveParamsHandle"
            >应用</el-button
          >
          <el-button size="small" @click="refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <pubChunk
        :mt="20"
        v-loading="pubChunkLoading"
        element-loading-text="数据计算中..."
      >
        <span slot="title">历史走势图</span>
        <div slot="headLeft">
          <div class="flex wrap">
            <chart1Head
              style="margin-right: 50px"
              :more_chart1_nav_list2="more_chart1_nav_list2"
              :chartDate.sync="chart_date"
              :oldDate="oldDate"
              @sameSection="sameSectionHandle"
              @sameSectionReal="sameSectionRealHandle"
              :hasReal="Object.keys(realquery).length ? true : false"
            ></chart1Head>
            <el-button-group>
              <el-button
                size="small"
                :type="dateFreq == 1 ? 'primary' : ''"
                :disabled="defaultDateFreq > 1"
                @click="dateFreq = 1"
                >日频</el-button
              >
              <el-button
                size="small"
                :type="dateFreq == 2 ? 'primary' : ''"
                :disabled="defaultDateFreq > 2"
                @click="dateFreq = 2"
                >周频</el-button
              >
              <el-button
                size="small"
                :type="dateFreq == 3 ? 'primary' : ''"
                @click="dateFreq = 3"
                >月频</el-button
              >
            </el-button-group>
            <!-- <el-checkbox style="margin-left: 14px;" class="flex-v-center" v-model="showBeyondIncome">显示超额曲线</el-checkbox> -->
            <!-- <el-checkbox class="flex-v-center" v-model="lineEcahrts_showAll">显示全部</el-checkbox> -->
            <el-button-group style="margin-left: 12px">
              <el-button
                size="small"
                :type="showReal ? 'primary' : ''"
                @click="showRealHandle"
                >实盘</el-button
              >
              <el-button
                size="small"
                :type="showBeyondIncome ? 'primary' : ''"
                @click="showBeyondIncomeHandle"
                >超额</el-button
              >
            </el-button-group>
          </div>
        </div>
        <Chart1
          v-if="classifyId && dataFrom.types.length && info.classfyName"
          id="groupManageChart1"
          @viewObj="viewObjHandle"
          @realContrastHnadle="realContrast"
          :userId="userId"
          :ids="classifyId"
          :lineEcahrts_showAll="lineEcahrts_showAll"
          :realquery="realquery"
          @clearRealquery="(val) => (realquery = val)"
          @beyondIncome2Change="beyondIncome2ChangeHandle"
          :pubChunkLoadingChange.sync="pubChunkLoading"
          :id_index="dataFrom.types"
          :chart_date="chart_date"
          :sameSection="sameSection"
          :sameSectionReal="sameSectionReal"
          :defaultDateFreq.sync="defaultDateFreq"
          :dateFreq.sync="dateFreq"
          :showReal="showReal"
          :showBeyondIncome="showBeyondIncome"
          :name1="info.classfyName"
          :name2="info.classfyName"
          :indexNames="one_contrastOptions_list"
          typePage="groupManage"
          :height="280"
          width="100%"
        />
        <div v-else style="height: 585px"></div>
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title">收益风险指标</span>
        <el-table
          class="pub_tableTree_maxBack"
          v-show="showChunk2"
          v-loading="listLoading_riskIndicators"
          :data="list_riskIndicators"
          fit
          default-expand-all
          row-key="rowKey"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          size="mini"
          style="width: 100%"
          :cell-style="{ padding: '8px 0' }"
          :cell-class-name="cellClass"
          :header-cell-style="{ color: '#333' }"
        >
          <el-table-column width="30" fixed="left"> </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            fixed="left"
            :width="maxNameWidth + 'px'"
          >
            <template slot-scope="{ row }">
              <div :title="row.name">
              <span
                v-if="row.strategyId"
                v-strategy="{ id: row.strategyId, userId }"
                >{{ row.name }}</span
              >
              <span v-else style="cursor: pointer; color: #666">{{
                row.name
              }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="nominalAmount"
            label="名义金额(万元)"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.nominalAmount">{{ row.nominalAmount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="initMoney" label="投资金额" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.initMoney">{{ row.initMoney }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="权重" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.weight"
                >{{ scope.row.weight | toFixed2 }}%</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRate"
            label="收益率"
            min-width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRate"
                :class="row.incomeRate >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="annualizedIncomeRate"
            label="年化收益率"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.annualizedIncomeRate"
                :class="
                  scope.row.annualizedIncomeRate >= 0
                    ? 'positiveFc'
                    : 'negativeFc'
                "
              >
                {{ scope.row.annualizedIncomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="annualFluctuationsRate"
            label="年化波动率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sharpeRate"
            label="夏普比率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="maximumDrawdownRate"
            label="最大回撤"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="calmarRate"
            label="卡玛比率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="maxBackIncomDay"
            label="最大回撤回补期"
            min-width="92"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.maxBackIncomDay">{{ row.maxBackIncomDay }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maxNotByNewHightDay"
            label="最大不创新高天数"
            min-width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.maxNotByNewHightDay">
                {{ row.maxNotByNewHightDay }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="investWinningRate"
            label="投资胜率"
            align="center"
          ></el-table-column>
        </el-table>
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title" class="line">
          <span
            class="showMonth_navList-item"
            :class="{
              'showMonth_navList-item_active': showMonth_navList_active == i,
            }"
            v-for="(item, i) in showMonth_navList"
            :key="i"
            @click="showMonthNavHandle(i)"
          >
            {{ item }}
          </span>
        </span>
        <div slot="headLeft" class="cutTableChart_icon">
          <div class="line">
            <div class="showMonth">
              <div class="round round1"></div>
              <div class="proName_tof">{{ info.classfyName }}</div>
            </div>
            <div class="showMonth">
              <div class="round round2"></div>
              <el-select
                style="width: 130px"
                v-model="month_contrast"
                size="mini"
                clearable
                placeholder="请选择"
                @change="monthContrastHandle"
              >
                <el-option
                  v-for="item in one_contrastOptions_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="margin-left: 26px">
            <svg-icon
              icon-class="zhuzhuangtu"
              :class="{
                showMonth_cutIcon_active: showMonth_cutIcon_active == 1,
              }"
              @mouseenter="showMonthCutIcon(1)"
            />
            <svg-icon
              icon-class="caidan"
              :class="{
                showMonth_cutIcon_active: showMonth_cutIcon_active == 2,
              }"
              @mouseenter="showMonthCutIcon(2)"
            />
          </div>
        </div>
        <div v-show="showChunk4" class="showChunk">
          <!-- 月度收益 -->
          <el-table
            v-show="
              showMonth_navList_active == 3 && showMonth_cutIcon_active == 2
            "
            fit
            :data="list_showMonth"
            style="width: 100%"
            row-key="rowKey"
            size="mini"
            max-height="516"
            lazy
            :load="loadChildTable"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :cell-style="{ padding: '8px 0' }"
            :header-cell-style="{ color: '#333' }"
            :cell-class-name="showMonthTableClassName"
          >
            <el-table-column prop="year" label="年份" width="100" fixed="left">
              <template slot-scope="{ row }">
                <div style="cursor: default">{{ row.year }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              prop="name"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.name">{{ row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="`${i}月`"
              align="center"
              v-for="i in 12"
              :key="i"
            >
              <template slot-scope="{ row }">
                <span
                  v-if="row[i + '_growthRate'] != null"
                  :class="
                    row[i + '_growthRate'] >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ row[i + "_growthRate"] }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="YTD" align="center">
              <template slot-scope="{ row }">
                <span
                  v-if="row['13_growthRate'] != null"
                  :class="
                    row['13_growthRate'] >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ row["13_growthRate"] }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 季度收益 -->
          <div
            v-show="
              showMonth_navList_active == 2 && showMonth_cutIcon_active == 2
            "
            v-loading="listLoading_showMonth_table1"
            style="min-height: 200px"
          >
            <el-table
              class="pub_tableTree_maxBack"
              v-if="showMonth_table1.length"
              :data="showMonth_table1"
              fit
              row-key="rowKey"
              size="mini"
              max-height="516"
              :cell-style="{ padding: '8px 0' }"
              :cell-class-name="cellClass"
              :tree-props="{ children: 'children' }"
              :header-cell-style="{ color: '#333' }"
              style="width: 100%"
            >
              <el-table-column width="30" fixed="left"> </el-table-column>
              <el-table-column
                prop="definition"
                label="名称/季度"
                fixed="left"
                :width="maxNameWidth + 'px'"
              >
                <template slot-scope="{ row }">
                  <div :title="row.definition">
                    <div :style="{ 'margin-left': row.ml + 'px' }">
                      {{ row.definition }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                :label="item.quarterName"
                align="center"
                min-width="160"
                v-for="(item, i) in showMonth_table1[0].list"
                :key="i"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.list[i] &&
                      scope.row.list[i].sumPnl != null &&
                      scope.row.definition == '· 最大回撤'
                    "
                  >
                    {{ scope.row.list[i].sumPnl | toFixed2 }}%
                  </span>
                  <span
                    v-else-if="
                      scope.row.list[i] && scope.row.list[i].sumPnl != null
                    "
                    :class="
                      scope.row.list[i].sumPnl >= 0
                        ? 'positiveFc'
                        : 'negativeFc'
                    "
                  >
                    {{ scope.row.list[i].sumPnl | toFixed2 }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 年度收益 -->
          <div
            v-show="
              showMonth_navList_active == 1 && showMonth_cutIcon_active == 2
            "
            v-loading="listLoading_showMonth_table2"
            style="min-height: 200px"
          >
            <el-table
              class="pub_tableTree_maxBack"
              v-if="showMonth_table2.length"
              :data="showMonth_table2"
              fit
              row-key="rowKey"
              size="mini"
              max-height="516"
              :cell-style="{ padding: '8px 0' }"
              :cell-class-name="cellClass"
              :tree-props="{ children: 'children' }"
              :header-cell-style="{ color: '#333' }"
              style="width: 100%"
            >
              <el-table-column width="30" fixed="left"> </el-table-column>
              <el-table-column
                prop="definition"
                label="年份/名称"
                fixed="left"
                :width="maxNameWidth + 'px'"
              >
                <template slot-scope="{ row }">
                  <div :title="row.definition">
                    <div :style="{ 'margin-left': row.ml + 'px' }">
                      {{ row.definition }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                :label="item.quarterName"
                align="center"
                min-width="160"
                v-for="(item, i) in showMonth_table2[0].list"
                :key="i"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.list[i] &&
                      scope.row.list[i].sumPnl != null &&
                      scope.row.definition == '· 最大回撤'
                    "
                  >
                    {{ scope.row.list[i].sumPnl | toFixed2 }}%
                  </span>
                  <span
                    v-else-if="
                      scope.row.list[i] && scope.row.list[i].sumPnl != null
                    "
                    :class="
                      scope.row.list[i].sumPnl >= 0
                        ? 'positiveFc'
                        : 'negativeFc'
                    "
                  >
                    {{ scope.row.list[i].sumPnl | toFixed2 }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 区间收益-表格 -->
          <div
            v-show="
              showMonth_navList_active == 0 && showMonth_cutIcon_active == 2
            "
            v-loading="listLoading_showMonth_table3"
            style="min-height: 200px"
          >
            <el-table
              class="pub_tableTree_maxBack"
              v-if="showMonth_table3.length"
              :data="showMonth_table3"
              fit
              row-key="rowKey"
              size="mini"
              max-height="516"
              :cell-style="{ padding: '8px 0' }"
              :cell-class-name="cellClass"
              :tree-props="{ children: 'children' }"
              :header-cell-style="{ color: '#333' }"
              style="width: 100%"
            >
              <el-table-column width="30" fixed="left"> </el-table-column>
              <el-table-column
                prop="definition"
                label="名称/年份"
                fixed="left"
                :width="maxNameWidth + 'px'"
              >
                <template slot-scope="{ row }">
                  <div :title="row.definition">
                    <div :style="{ 'margin-left': row.ml + 'px' }">
                      {{ row.definition }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                :label="item.quarterName"
                align="center"
                min-width="80"
                v-for="(item, i) in showMonth_table3[0].list"
                :key="i"
                :fixed="item.fixed"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.list[i] &&
                      scope.row.list[i].sumPnl != null &&
                      scope.row.definition == '· 最大回撤'
                    "
                  >
                    {{ scope.row.list[i].sumPnl | toFixed2 }}%
                  </span>
                  <span
                    v-else-if="
                      scope.row.list[i] && scope.row.list[i].sumPnl != null
                    "
                    :class="
                      scope.row.list[i].sumPnl >= 0
                        ? 'positiveFc'
                        : 'negativeFc'
                    "
                  >
                    {{ scope.row.list[i].sumPnl | toFixed2 }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="month-chartContent">
            <div v-if="showMonth_cutIcon_active == 1" class="mChunk1">
              <month-return-chart
                v-if="info.classfyName"
                v-loading="list_monthNetWorthDistributed_loading"
                id="groupManageMonthReturnChart"
                :name_contrast="name_contrast"
                :chart_date="chart_date"
                :month_contrast="month_contrast"
                :y-name="info.classfyName"
                :data="list_monthNetWorthDistributed"
                :showMonth_navList_active="showMonth_navList_active"
                :height="400"
                width="100%"
              />
            </div>
          </div>
        </div>
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title">产品相关性</span>
        <div slot="headLeft" class="relevance-tip">
          <div class="red-block"></div>
          高相关性≥0.8 (占比{{ highRelevanceRate || 0 }})
          <div class="yellow-block"></div>
          0≤低相关性≤0.3 (占比{{ lowRelevanceRate || 0 }})
          <div class="green-block"></div>
          负相关性&lt;0 (占比{{ negativeRelevanceRate || 0 }})
        </div>
        <div v-show="showChunk6" class="showChunk">
          <el-table
            v-loading="listLoading_productRelevance"
            :data="relevance_list"
            fit
            stripe
            size="mini"
            style="width: 100%"
            :cell-style="{ padding: '0', height: '40px' }"
            :header-cell-style="{
              padding: '0',
              color: '#333',
              height: '40px',
              overflow: 'hidden',
            }"
            :cell-class-name="relevanceTableRowClassName"
            header-cell-class-name="overflowHeader"
          >
            <el-table-column
              type="index"
              width="200"
              label="产品名称"
              show-overflow-tooltip
              :index="relevanceTitleHandle"
            >
              <template slot-scope="scope">
                <div
                  class="productName"
                  style="line-height: 15px"
                  :title="scope.row.strategyName"
                >
                  {{ scope.row.strategyName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :prop="`list[${i}].productRelevance`"
              :label="item.strategyName"
              v-for="(item, i) in relevance_list"
              :key="i"
              align="center"
              min-width="120"
            >
              <template slot="header">
                <div
                  :title="item.strategyName"
                  class="productName"
                  style="line-height: 15px; font-size: 12px; min-width: 100px"
                >
                  {{ item.strategyName }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title">历史净值</span>
        <div slot="headLeft" class="cutTableChart_icon">
          <el-button
            style="margin-left: 15px"
            class="bg-green search-box download-btn"
            size="small"
            @click="exportNetWorthHandle"
          >
            导出净值
          </el-button>
        </div>
        <div v-show="showChunk3" class="showChunk">
          <el-table
            v-loading="listLoading_netWorth"
            :data="list_netWorth"
            stripe
            fit
            size="mini"
            :cell-style="{ padding: '8px 0' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60"
            ></el-table-column>
            <!-- <el-table-column prop="classifyName" label="分类名称" align="center" min-width="180" show-overflow-tooltip></el-table-column> -->
            <el-table-column
              prop="networthTime"
              label="净值日期"
              align="center"
              min-width="100"
            >
              <template slot-scope="{ row }">
                <span>{{ row.networthTime | parseTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="networthValue"
              label="单位净值"
              align="center"
              min-width="100"
            ></el-table-column>
            <el-table-column
              prop="networthValue"
              label="累计净值"
              align="center"
              min-width="100"
            ></el-table-column>
            <el-table-column
              prop="networthValue"
              label="复权累计净值"
              align="center"
              min-width="100"
            ></el-table-column>
            <el-table-column
              prop="pnl"
              label="涨跌幅"
              align="center"
              min-width="100"
            >
              <template slot-scope="{ row }">
                <span
                  v-if="row.pnl != null"
                  :class="row.pnl >= 0 ? 'positiveFc' : 'negativeFc'"
                >
                  {{ row.pnl }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-if="total_netWorth > 0"
            style="padding-bottom: 0"
            :total="total_netWorth"
            :page.sync="listQuery.pageCurrent"
            :limit.sync="listQuery.limit"
            @pagination="classClassifyHistory"
          />
        </div>
      </pubChunk>
    </div>

    <allStrategyOpen
      v-if="allStrategyVisible"
      title="添加实盘"
      type="radio"
      ref="allStrategy"
      :userId="userId"
      :noDblclick="true"
      :disabled="[`${'F' + classifyId}`]"
      @selctInvestName="selctInvestNameHandle"
    ></allStrategyOpen>

    <div style="height: 200px"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getClassifyHeadDetail,
  getClassRiskRateByClassifyId,
  classClassifyHistory,
  findClassifyNetWorthMonthly,
  getStrategyClassifyExt,
  getClassifyQuarter,
  getClassifyYear,
  findClassifyNetWorthExtendBySegment,
  findClassifyNetWorthMonthlyHistogram,
  findClassifyNetWorthMonthDistribute,
  findClassifyNetWorthMonthDetailByPage,
  getQuarterClassifyNetWorthDistribute,
  getYearClassifyNetWorthDistribute,
  getSegmentClassifyNetWorthDistribute,
  getClassifySegment,
  getClassifyStrategyRelevance,
  classifyMonthlyIncreaseDialog,
} from "@/api/groupManage";

import {
  getIndexRiskByIndexTypeAndTime,
  getMonthlyIndex,
  findTimeScopeGrowth,
  exportNetWorth,
} from "@/api/policyManage";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import monthReturnChart from "@/components/Charts/barEcharts_monthReturn.vue";
import Chart1 from "@/components/Charts/strategyComb/groupManage/chart1.vue";
import chart1Head from "@/components/investComn/chart1Head2.vue";
// import showMonthOpen from "@/views/other/showMonthOpen.vue";
import allStrategyOpen from "../../other/allStrategyOpen.vue";
import Pagination from "@/components/Pagination";
import { parseTime, deepClone } from "@/utils";
import { riskIndexCalc, randomNum, getMaxLength } from "@/utils/pro";
import pubChunk from "@/components/investComn/pubChunk.vue";

export default {
  name: "StrategyCombDetails",
  components: {
    indexSelectTree,
    Chart1,
    Pagination,
    monthReturnChart,
    // showMonthOpen,
    chart1Head,
    pubChunk,
    allStrategyOpen,
  },
  data() {
    return {
      pubChunkLoading: false,

      allStrategyVisible: true,

      showBeyondIncome: false, // 超额收益
      showReal: true, // 显示实盘

      defaultDateFreq: undefined,
      dateFreq: undefined,

      active: 1,
      list1: [],
      monthlyIndexData: {},

      chart_date: [],
      oldDate: [],
      more_chart1_nav_list2: [],
      dataFrom: {
        types: [],
      },
      classifyId: "",
      info: {},
      start_date: "",
      sameSection: false,
      sameSectionReal: false,

      showChunk1: true,

      showChunk2: true,
      listLoading_riskIndicators: false,
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      add_column_list: [],

      showChunk3: true,
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10,
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,

      showChunk4: true,
      showMonth_navList: ["区间收益", "年度收益", "季度收益", "月度收益"],
      nominalAmount: undefined,
      list_riskIndicators_key: 1,
      combTreeValue: "",
      showMonth_navList_active: 0,
      showMonth_cutIcon_active: 2,
      // 季度收益
      listLoading_showMonth_table1: false,
      listLoading_showMonth_table2: false,
      listLoading_showMonth_table3: false,
      list_monthNetWorthDistributed_loading: false,
      showMonth_table1: [],
      showMonth_table2: [],
      showMonth_table3: [],
      one_contrastOptions_list: [],
      contrastOptions_obj: {},
      month_contrast: undefined,
      name_contrast: "",
      list_showMonth: [],
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_showMonth_profit_column1: [
        { id: 99, name: "成立以来" },
        { id: 0, name: "今年以来" },
        { id: 1, name: "近1月" },
        { id: 3, name: "近3月" },
        { id: 6, name: "近6月" },
        { id: 12, name: "近1年" },
        { id: 24, name: "近2年" },
        { id: 36, name: "近3年" },
      ],
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: {
        // 月度回报 分页
        pageCurrent: 1,
        limit: 10,
      },
      monthNetWorthDetial_total: 0,

      showChunk5: true,
      listLoading: false,
      strategyPortfolioDetials: [],
      netWorthDetialBeanList: [], // 子策略数据

      showChunk6: true,
      listLoading_productRelevance: false,
      relevance_list: [],

      chart1List: [],

      realquery: {}, // 实盘对比

      lineEcahrts_showAll: false,
      highRelevanceRate: "",
      lowRelevanceRate: "",
      negativeRelevanceRate: "",
      maxNameWidth: 100,
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  watch: {
    "dataFrom.types": {
      handler(newVal, oldVal) {
        if (newVal.length > 5) {
          this.$message({
            message: "最多选择5个对比指标",
            type: "warning",
            duration: 2000,
          });
          this.$nextTick(() => {
            this.dataFrom.types = oldVal;
          });
        }
        if (Object.keys(this.contrastOptions_obj).length) {
          this.one_contrastOptions_list = [];
          newVal.forEach((item) => {
            this.one_contrastOptions_list.push({
              id: item,
              name: this.contrastOptions_obj[item],
            });
          });
          if (oldVal && this.list_riskIndicators.length) {
            this.getIndexRiskByIndexTypeAndTime(newVal);
          }
        }
      },
      deep: true,
    },
    month_contrast(val) {
      if (val) {
        this.name_contrast = this.contrastOptions_obj[val]; // 月度表现头部修改
      }
      this.showMonthNavHandle(this.showMonth_navList_active);
    },
    listLoading_riskIndicators(val) {
      if (!val) {
        this.list_riskIndicators = this.riskRecursionHandle(
          this.chart1List,
          this.list_riskIndicators
        );
        this.list_riskIndicators_key++;
      }
    },
  },
  updated() {
    for (
      let index = 0;
      index < document.getElementsByClassName("productName").length;
      index++
    ) {
      const element = document.getElementsByClassName("productName")[index];
      element.className = "productName";
      if (element.offsetHeight > 40) {
        element.className = "productName mlOverflow";
      } else {
        element.className = "productName";
      }
    }
  },
  async created() {
    this.classifyId = this.$route.params && this.$route.params.id; // 多开标签
    // this.classifyId = this.$route.query.id
    await this.getClassifyHeadDetail(this.classifyId);
    this.classClassifyHistory(this.classifyId);
    this.findNetWorthExtendByStrategyId2(this.classifyId);
    this.getMonthNetWorthLine(this.classifyId);
    this.getMonthNetWorthDistributed(this.classifyId);
    this.getMonthNetWorthDetial(this.classifyId);
    this.getProductRelevance();
    this.getMonthNetWorth(this.classifyId);
  },
  methods: {
    /**
     * 表格数据单行显示内边距为0
     */
    cellClass(row) {
      if (
        (!row.column.label ||
          row.column.label === "名称/年份" ||
          row.column.label === "名称/季度") &&
        this.maxNameWidth < 400
      ) {
        return "cell-pad-0 nowrap";
      } else if (this.maxNameWidth >= 400) {
        return "cell-pad-0 clamp2Ellipsis";
      }
      return "";
    },
    /**
     * table column 自适应列宽
     * @param label 表名
     * @param prop 表格数据
     * @param tableData 表格数据
     */
    flexColumnWidth(label, prop, tableData) {
      const arr = tableData.map((x) => x[prop]);
      arr.push(label);
      if (getMaxLength(arr) + 25 >= 400) {
        return 400;
      }
      return getMaxLength(arr) + 25;
    },
    showRealHandle() {
      this.showBeyondIncome = false;
      this.showReal = true;
    },
    showBeyondIncomeHandle() {
      this.showBeyondIncome = true;
      this.showReal = false;
    },
    realContrast() {
      this.allStrategyVisible = true;
      this.$nextTick(() => {
        this.$refs.allStrategy.init();
      });
    },
    selctInvestNameHandle(row) {
      this.realquery = row;
    },
    goContrast() {
      const res_list = [
        {
          id: this.classifyId,
          name: this.info.classfyName,
          type: 2,
        },
      ];
      const id = randomNum(6);
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list),
          one: 1,
        },
      });
    },
    beyondIncome2ChangeHandle(val) {
      this.dataFrom.types = [val, ...this.dataFrom.types];
    },
    viewObjHandle(data) {
      this.chart1List = riskIndexCalc(data);

      this.list_riskIndicators = this.riskRecursionHandle(
        this.chart1List,
        this.list_riskIndicators
      );
      this.list_riskIndicators_key++;
    },
    riskRecursionHandle(resList, list) {
      list.map((items, i) => {
        const resList_i = resList.findIndex((item) => item.name == items.name);
        if (resList_i != -1) {
          const res = resList[resList_i];
          list[i] = {
            strategyId: items.strategyId,
            classifyId: items.classifyId,
            children: items.children,
            rowKey: items.rowKey,
            weight: items.weight,
            initMoney: items.initMoney,
            nominalAmount: items.nominalAmount,
            ...res,
          };
        } else if (items.children) {
          // 分类
          items.children.forEach((_) => {
            list[i] = {
              annualFluctuationsRate: "--",
              sharpeRate: "--",
              maxBackIncomDay: "--",
              maximumDrawdownRate: "--",
              calmarRate: "--",
              investWinningRate: "--",
              ...list[i],
            };
          });
        }
        if (items.children) this.riskRecursionHandle(resList, items.children);
      });
      // list[0].nominalAmount = this.nominalAmount
      return list;
    },
    relevanceTableRowClassName({ row, rowIndex, columnIndex }) {
      const productRelevance =
        columnIndex === 0 ? "-" : row.list[columnIndex - 1].productRelevance;
      if (columnIndex === 0) {
        return "";
      } else if (productRelevance === "-") {
        return "cell-row-default";
      } else if (+productRelevance >= 0.8) {
        return "cell-row-high";
      } else if (+productRelevance < 0) {
        return "cell-row-negative";
      } else if (+productRelevance <= 0.3 && +productRelevance >= 0) {
        return "cell-row-low";
      } else {
        return "cell-row-default";
      }
    },
    relevanceTitleHandle(i) {
      return this.relevance_list[i].strategyName;
    },
    getProductRelevance() {
      this.listLoading_productRelevance = true;
      getClassifyStrategyRelevance({
        classifyId: this.classifyId,
      }).then((res) => {
        this.listLoading_productRelevance = false;
        this.relevance_list = res.body.list;
        if (this.relevance_list.length) {
          this.highRelevanceRate =
            res.body.relevanceProportionVo.highRelevanceRate;
          this.lowRelevanceRate =
            res.body.relevanceProportionVo.lowRelevanceRate;
          this.negativeRelevanceRate =
            res.body.relevanceProportionVo.negativeRelevanceRate;
        }
        // console.log("产品相关性 - ", res.body);
      });
    },
    showMonthCutIcon(i) {
      this.showMonth_cutIcon_active = i;
    },
    // 切换月度表现nav
    showMonthNavHandle(i) {
      this.showMonth_navList_active = i;
      switch (i) {
        case 0:
          if (
            !this.showMonth_table3.length ||
            this.old_month_contrast3 != this.month_contrast
          ) {
            this.old_month_contrast3 = this.month_contrast;
            this.getClassifySegment();
          }
          this.getSegmentClassifyNetWorthDistribute();
          break;
        case 1:
          if (
            !this.showMonth_table2.length ||
            this.old_month_contrast2 != this.month_contrast
          ) {
            this.old_month_contrast2 = this.month_contrast;
            this.getClassifyYear();
          }
          this.getYearClassifyNetWorthDistribute();
          break;
        case 2:
          if (
            !this.showMonth_table1.length ||
            this.old_month_contrast1 != this.month_contrast
          ) {
            this.old_month_contrast1 = this.month_contrast;
            this.getClassifyQuarter();
          }
          this.getQuarterClassifyNetWorthDistribute();
          break;
        case 3:
          this.getMonthNetWorthDistributed(this.classifyId);
          break;
        default:
          break;
      }
    },
    getClassifyQuarter() {
      this.listLoading_showMonth_table1 = true;
      getClassifyQuarter({
        classifyId: this.classifyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
      }).then((res) => {
        this.listLoading_showMonth_table1 = false;
        console.log("季度收益 table", res);
        this.showMonth_table1 = this.segmentMaxBackHandle(res.body);
      });
    },
    getClassifyYear() {
      this.listLoading_showMonth_table2 = true;
      getClassifyYear({
        classifyId: this.classifyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
      }).then((res) => {
        this.listLoading_showMonth_table2 = false;
        console.log("年度收益 table", res);
        this.showMonth_table2 = this.segmentMaxBackHandle(res.body);
      });
    },
    getClassifySegment() {
      this.listLoading_showMonth_table3 = true;
      getClassifySegment({
        classifyId: this.classifyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        this.listLoading_showMonth_table3 = false;
        console.log("区间收益 table", res);
        this.showMonth_table3 = this.segmentMaxBackHandle(res.body);
        this.maxNameWidth = this.flexColumnWidth(
          "名称/年份",
          "definition",
          this.showMonth_table3
        );
      });
    },
    segmentMaxBackHandle(list) {
      let res = [];
      res = list.map((item, i) => {
        let prefixName = "";
        let ml = 0;
        if (i === 0) {
          prefixName = "[分类] ";
        } else if (this.month_contrast && i === list.length - 1) {
          prefixName = "[指数] ";
        } else {
          prefixName = "[策略] ";
          ml = 10;
        }
        return {
          rowKey: i * 2 + 1,
          ...item,
          definition: `${prefixName}${item.definition}`,
          ml: ml,
          children: [
            {
              rowKey: i * 2 + 2,
              list: (() => {
                let res = [];
                res = item.list.map((el) => {
                  el.fixed =
                    el.quarterName === "今年以来"
                      ? "left"
                      : el.quarterName === "成立以来"
                      ? "right"
                      : false;
                  return {
                    quarterName: el.quarterName,
                    sumPnl: el.maxDown,
                  };
                });
                return res;
              })(),
              definition: "· 最大回撤",
            },
          ],
        };
      });
      return res;
    },
    sameSectionHandle(val) {
      this.sameSection = val;
    },
    sameSectionRealHandle(val) {
      this.sameSectionReal = val;
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj;
    },
    saveParamsHandle() {
      this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types);
    },
    refresh() {
      location.reload();
    },
    async getClassifyHeadDetail(classifyId) {
      const res = await getClassifyHeadDetail({
        classifyId,
      });
      console.log("详情", res);

      // 多开标签 设置
      this.tempRoute = Object.assign({}, this.$route);
      this.$setTagsViewTitle(
        this.tempRoute,
        `净值分析[策略分类]-${res.body.classfyName}`
      );
      document.title = `净值分析[策略分类]-${res.body.classfyName}`;

      if (res.body.childrenId) {
        this.realquery = {
          childrenId: res.body.childrenId,
          childrenName: res.body.childrenName,
          childrenType: res.body.childrenType,
        };
      }

      this.info = res.body;
      this.dataFrom.types = [res.body.indexType];
      const dates = [];
      dates[0] = parseTime(res.body.classifyNetWorthBean.startDate);
      dates[1] = res.body.classifyNetWorthBean.endDate
        ? parseTime(res.body.classifyNetWorthBean.endDate)
        : parseTime(new Date());
      this.chart_date = dates;
      this.oldDate = deepClone(dates);
      let year0 = Number(this.chart_date[0].slice(0, 4));
      const year1 = Number(this.chart_date[1].slice(0, 4));
      this.more_chart1_nav_list2 = [];
      while (year0 <= year1) {
        this.more_chart1_nav_list2.push(year0 + "年度");
        year0++;
      }
      this.getriskIndicators();

      this.getClassifySegment();
      this.getSegmentClassifyNetWorthDistribute();
      this.getClassifyYear();
      this.getClassifyQuarter();
    },
    getStrategyClassifyExt(classifyId) {
      this.listLoading = true;
      getStrategyClassifyExt({
        classifyId,
      }).then((res) => {
        console.log("策略列表", res);
        this.listLoading = false;
        res.body.map((item, i) => {
          item.rowKey = i + 2;
          item.name = item.strategyName;
          item = Object.assign(item, item.riskIndicatorsBean);
        });
        this.strategyPortfolioDetials = res.body;
        this.$set(this.list_riskIndicators[0], "children", res.body);
      });
    },
    showMonthTableClassName({ row, columnIndex }) {
      if (columnIndex === 0) {
        if (row.indexType) {
          return "showMonthyearBorder1";
        }
        return "showMonthyearBorder0";
      }
      if (columnIndex === 1) {
        if (this.maxNameWidth === 400) {
          return "clamp2Ellipsis";
        }
        return "nowrap";
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return "title-row";
      } else if (columnIndex === 1) {
        return "cell-row-0";
      } else if (columnIndex === 2) {
        return "cell-row-1";
      } else if (columnIndex === 3) {
        return "cell-row-2";
      } else if (columnIndex === 4) {
        return "cell-row-3";
      } else if (columnIndex === 5) {
        return "cell-row-4";
      } else if (columnIndex === 6) {
        return "cell-row-5";
      } else if (columnIndex === 7) {
        return "cell-row-6";
      }
      return "";
    },
    // 收益风险指标
    getriskIndicators() {
      this.listLoading_riskIndicators = true;
      getClassRiskRateByClassifyId({
        classifyId: this.classifyId,
        userId: this.userId,
      }).then((res) => {
        console.log("风险指标", res);
        this.list_riskIndicators[0] = res.body;
        this.list_riskIndicators[0].name = this.info.classfyName;
        this.list_riskIndicators[0].rowKey = 1;
        this.list_riskIndicators[0].strategyId = null;
        this.list_riskIndicators[0].netWorthExtendBeanList =
          res.body.classifyNetWorthExtendBeans;
        this.getStrategyClassifyExt(this.classifyId);
        this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types);
      });
    },
    // 收益风险指标 指数
    getIndexRiskByIndexTypeAndTime(indexType) {
      this.listLoading_riskIndicators = true;
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        console.log("风险指标 指数", res);
        this.listLoading_riskIndicators = false;
        this.list_riskIndicators = [this.list_riskIndicators[0]];
        Object.keys(res.body).forEach((index) => {
          const name = this.contrastOptions_obj[index];
          this.list_riskIndicators.push({
            name,
            rowKey: index + 10000,
            netWorthExtendBeanList: res.body[index].scopeIndexVos,
            ...res.body[index],
          });
        });
      });
    },
    // 月度收益 tree 分类 or 策略
    async loadChildTable(row, treeNode, resolve) {
      let res = null;
      res = await classifyMonthlyIncreaseDialog({
        year: row.year,
        classifyId: this.classifyId,
      });
      const new_list = [];
      for (const key in res.body) {
        if (Object.hasOwnProperty.call(res.body, key)) {
          const new_obj = {};
          if (res.body[key]) {
            res.body[key].forEach((item, index) => {
              new_obj[item.month + "_growthRate"] = Number(item.monthIncrease);
            });
          }
          new_obj.name = `[策略] ${key}`;
          new_obj.rowKey = `${key}_${row.year}`;
          new_list.push(new_obj);
        }
      }
      console.log(row.year + "月度收益table", new_list);
      resolve(new_list);
    },
    // 历史净值
    classClassifyHistory() {
      this.listLoading_netWorth = true;
      classClassifyHistory({
        classifyId: this.classifyId,
        ...this.listQuery,
        userId: this.userId,
      }).then((res) => {
        this.listLoading_netWorth = false;
        console.log("历史净值", res);
        this.list_netWorth = res.body.list;
        this.total_netWorth = res.body.total;
      });
    },
    // 历史月度表现
    getMonthNetWorth(classifyId) {
      findClassifyNetWorthMonthly({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        const list = Object.keys(res.body)
          .map((i) => {
            return res.body[i];
          })
          .reverse();
        const new_list = [];
        list.forEach((items, index) => {
          new_list[index] = {};
          items.map((el, j) => {
            new_list[index][el.month + "_growthRate"] = Number(
              el.monthIncrease
            );
          });
          new_list[index].name = "[分类] " + this.info.classfyName;
          new_list[index].year = items[0].year;
          new_list[index].hasChildren = true;
          new_list[index].hasClassify = true;
          new_list[index].rowKey = index * 2 + 1;
          new_list[index].compositionId = items[0].classifyId;
        });
        this.list_showMonth = new_list;
        console.log("月度收益table", this.list_showMonth);
      });
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      if (indexType) {
        getMonthlyIndex({
          indexType,
          startTime: this.chart_date[0],
          endTime: this.chart_date[1],
        }).then((res) => {
          console.log("指数月度表现", res);
          const list = Object.keys(res.body)
            .map((i) => {
              return res.body[i];
            })
            .reverse();
          const indexTypeRow = this.one_contrastOptions_list.filter((item) => {
            return item.id === indexType;
          })[0];
          const new_list = [];
          list.forEach((items, index) => {
            new_list[index] = {};
            items.map((el, j) => {
              const month = el.month || +el.indexTime.split("-")[1];
              new_list[index][month + "_growthRate"] = Number(
                el.indexGrowthRate
              );
            });
            new_list[index].name = `[指数] ${indexTypeRow.name}`;
            new_list[index].year = items[0].year;
            new_list[index].hasChildren = false;
            new_list[index].hasClassify = false;
            new_list[index].rowKey = `[指数]${indexTypeRow.name}_${index}`;
            new_list[index].indexType = indexType;
          });
          const new_list_showMonth = [];
          for (let i = 0; i < this.list_showMonth.length; i++) {
            new_list_showMonth.push(this.list_showMonth[i]);
            if (new_list[i]) {
              new_list_showMonth.push(new_list[i]);
            }
          }
          this.list_showMonth = new_list_showMonth;
        });
      } else {
        this.name_contrast = "";
        this.month_contrast = undefined;
        this.list_showMonth = []; // 月度表现列表数据
        this.list_showMonth_profit = []; // 收益分布列表数据
        this.getMonthNetWorth(this.classifyId);
        this.findNetWorthExtendByStrategyId2(this.classifyId);
      }
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(classifyId) {
      this.findNetWorthExtendByStrategyId2_loading = true;
      findClassifyNetWorthExtendBySegment({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        console.log("收益分布 列表", res);
        this.findNetWorthExtendByStrategyId2_loading = false;
        this.headTail(res.body);
        this.list_showMonth_profit = res.body;
      });
    },
    // 收益分布 列表 指数
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        console.log("对比指数 收益分布 列表", res);
        this.headTail(res.body);
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth;
        });
        this.list_showMonth_key++;
      });
    },
    headTail(list) {
      list.unshift(list[list.length - 1]);
      list.splice(list.length - 1, 1);
    },
    // 收益分布 柱状图
    getMonthNetWorthLine(classifyId) {
      findClassifyNetWorthMonthlyHistogram({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        console.log("收益分布", res);
        this.list_monthNetWorthLine = res.body;
      });
    },
    // 月度回报
    getMonthNetWorthDistributed(classifyId) {
      findClassifyNetWorthMonthDistribute({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        console.log("月度回报", res);
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    getQuarterClassifyNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true;
      getQuarterClassifyNetWorthDistribute({
        classifyId: this.classifyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("季度收益", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    getYearClassifyNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true;
      getYearClassifyNetWorthDistribute({
        classifyId: this.classifyId,
        indexType: this.month_contrast,
      }).then((res) => {
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
        console.log("年度收益", res);
      });
    },
    getSegmentClassifyNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true;
      getSegmentClassifyNetWorthDistribute({
        classifyId: this.classifyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("区间收益 table 指数", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 月度回报 列表
    getMonthNetWorthDetial(classifyId) {
      this.getMonthNetWorthDetial_loading = true;
      findClassifyNetWorthMonthDetailByPage({
        classifyId,
        userId: this.userId,
        ...this.monthNetWorthDetial_listQuery,
      }).then((res) => {
        console.log("月度回报 列表", res);
        this.getMonthNetWorthDetial_loading = false;
        this.list_table_getMonthNetWorthDetial = res.body.list;
        this.monthNetWorthDetial_total = res.body.total;
      });
    },
    exportNetWorthHandle() {
      // 下载净值案例
      exportNetWorth({ contextStatus: 2, contextId: this.classifyId }).then(
        (res) => {
          const content = res;
          const blob = new Blob([content]);
          const fileName = this.info.classfyName + "净值（分类）.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }
      );
    },
    refreshPage() {
      const view = this.$route;
      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        const { fullPath } = view;
        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + fullPath,
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mlOverflow {
  max-height: 30px;
  &::after {
    content: "...";
    display: block;
    position: absolute;
    bottom: 2px;
    right: 12px;
    font-size: 18px;
    padding-left: 10px;
    padding-bottom: 4px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), #ffffff);
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  .mlOverflow::after {
    background: linear-gradient(
      to right,
      rgba(241, 245, 248, 0.8),
      rgba(241, 245, 248, 1)
    );
  }
}
.afterInvestDel-page {
  position: relative;
  .afterInvestDel-page {
    .title {
      font-size: 26px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #262626;
    }
    .relevance-tip {
      line-height: 12px;
      display: flex;
      align-items: center;
      color: #666;
      font-size: 12px;
      margin-top: 10px;
      .yellow-block {
        width: 12px;
        height: 12px;
        background: rgba(255, 233, 0, 0.3);
        margin: 0 3px;
      }
      .red-block {
        width: 12px;
        height: 12px;
        background: #fcc6ba;
        margin: 0 3px 0 8px;
      }
      .blue-block {
        width: 12px;
        height: 12px;
        background: #69c0ff;
        margin: 0 3px 0 8px;
      }
      .green-block {
        width: 12px;
        height: 12px;
        background: rgba(55, 186, 0, 0.3);
        margin: 0 3px 0 8px;
      }
      .gray-block {
        width: 12px;
        height: 12px;
        background: #f5f5f5;
        margin: 0 3px 0 8px;
      }
    }
  }
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
  .nav {
    height: 56px;
    margin-top: 20px;
    padding: 0 24px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .nav-left {
      font-size: 18px;
      font-weight: 400;
      color: #262626;
      .nav-item {
        font-family: PingFangSC-Regular, PingFang SC;
        cursor: pointer;
        line-height: 56px;
        & + .nav-item {
          margin-left: 48px;
        }
      }
    }
    .navActive {
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
  }
  .content {
    .column {
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-top: 30px;
      cursor: pointer;
      user-select: none;
      .el-icon {
        color: #4f95dd;
        font-weight: bold;
        margin-left: 6px;
      }
      .openChunk {
        transform: rotate(90deg);
      }
      &::before {
        display: inline-block;
        content: "";
        width: 6px;
        height: 26px;
        background: #42b983;
        margin-right: 6px;
      }
    }
  }

  .operation {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
}

.app-container1 {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}
.icon-jia {
  font-size: 12px;
  margin-right: 6px;
}
</style>
